<template>
	<view>
		<view id="myid" class="myc">
			选择 基础选贼
		</view>
		<view class="myc2" name='11'>
			复合选择器
		</view>
		<view :class="{my3:istrue,myc2:istrue}">
			calss 的绑定
		</view>
		<view class='myc' :class="{my3:istrue,myc2:false}">
			class='myc 知道其中一个类比含 和vue 的写法一样
		</view>
		<view :class="calssobj">
			calssobj 不支持这种写法
		</view>
		<view :style="{fontSize: fs+'px',color:red}">
			style 的绑定
		</view>
		<view :style='styleobj'>
			styleobj的绑定不支持 的绑定
		</view>
		<!-- vue 可以这么写,uni也可以 -->
		<view :style="[{color:'red'},{fontSize: fs+'px'}]">
			style 的绑定
		</view>
		<image src="@/static/link-01.png" mode=""></image>
		<text class="iconfont icon-shipin">阿萨德</text>

	</view>
</template>

<script>
	/* uniapp 无法支持 calssobj 和style obj vue 可以 */
	export default {
		data() {
			return {
				istrue: true,
				calssobj: {
					'my3': true
				},
				fs: 40,
				red: 'white',
				styleobj: {
					color: 'red',
					fontSize: '20px'
				},
			}
		},
		methods: {

		}
	}
</script>
<!-- scoped 只对当前的页面生效 -->
<style scoped>
	@import url("@/static/global.css");

	/* 权重  id>类>标签>通配符
	选择器分为2大类 基础和复合
	基础,id,类,标签,*通配符, 
	复合选择器,并集 ,,,,结构,伪类,
	小程序和uni都不支持* ,body==page   	*{font-size: 40px	}
	 */
		
	image {
		width: 100%;
	}

	view {
		background-color: #0000FF;
		font-size: 40px;
		/* 相对路径 */
		background-image: url(../../static/link-01.png);
		/* 绝对路径 uniapp独有 */
		background-image: url(~@/static/link-02.png);
	}

	.myc {
		background-color: #00FF00;
	}

	#myid {
		background-color: #FF0000;
	}

	/* 并集 */
	.myc,
	.myc2 {
		background-color: #8F8F94;
	}

	/* 结构 后代,子类,兄弟,紧邻,顺序 */
	#myid+.myc2 {
		background-color: #007AFF;
	}

	.my3 {
		background-color: #00FF00;
	}

	/* uniapp里边的无法使用属性选择器 */
	/* [name='11']{
		font-size: 20px
	}		 */
</style>
